<template>
  <el-dialog
    :close-on-click-modal="false"
    title="计划人员配置"
    v-model="visible"
    align-center
    width="960px"
    destroy-on-close
  >
    <div>
      <el-button type="primary" class="mb-[8px] mt-[4px]" @click="handleAdd"
        >新增</el-button
      >
      <vxe-table :data="tableData" height="400" ref="tableRef">
        <vxe-column field="type" title="类型">
          <template #default="{ row }">
            <VSelect
              v-model="row.type"
              :options="options"
              placeholder="请选择"
              class="w-full"
            />
          </template>
        </vxe-column>
        <vxe-column field="department_id" title="部门">
          <template #default="{ row }">
            <VCascader
              v-model="row.department_id"
              placeholder="请选择"
              type="1"
              checkStrictly
            />
          </template>
        </vxe-column>
        <vxe-column field="plan_user_id" title="计划人员">
          <template #default="{ row }">
            <VCascader v-model="row.plan_user_id" placeholder="请选择" />
          </template>
        </vxe-column>
        <vxe-column title="操作" width="120">
          <template #default="{ row }">
            <el-button link type="primary" :loading="loading" @click="save(row)"
              >保存</el-button
            >
            <el-button link type="danger" @click="remove(row.dpuc_id)"
              >删除</el-button
            >
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <template #footer>
      <el-button @click="handleClose(false)">取 消</el-button>
    </template>
    <Add ref="addRef" :options="options" @success="getList" />
  </el-dialog>
</template>
<script setup>
import { ElMessage,ElMessageBox } from "element-plus";
import {
  purchaseDemandPlanList,
  purchaseDemandPlanDelete,
  purchaseDemandSavePlan,
} from "../../api";
import { resMessage } from "@/utils/res";
import Add from "./Add.vue";
const props = defineProps({
  options: { type: Array, default: () => [] },
});
const emit = defineEmits(["close", "success"]);
const loading = ref(false);
const visible = ref(false);
const form = ref({});
// 打开弹窗
const open = async () => {
  visible.value = true;
  getList();
};
const tableData = ref([]);
const getList = async () => {
  const { data } = await purchaseDemandPlanList();
  tableData.value = data || [];
};
const tableRef = ref();
const addRef = ref();
const handleAdd = () => {
  addRef.value.open();
};
const remove = async (dpuc_id) => {
  ElMessageBox.confirm("是否确认删除？", "取消", {
    confirmButtonClass: "messagebox-confirm-button",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(async () => {
      loading.value = true;
      try {
        await purchaseDemandPlanDelete({ dpuc_id });
        ElMessage.success("操作成功");
        getList()
      } catch (error) {
        ElMessage.error(error);
      }
      loading.value = false;
    })
    .catch(() => {
      ElMessage({ type: "info", message: "取消操作" });
    });
};
const save = async (row) => {
  try {
    loading.value = true;
    const res = await purchaseDemandSavePlan(row);
    ElMessage.success("操作成功");
    getList()
  } finally {
    loading.value = false;
  }
};
const handleClose = (refresh) => {
  visible.value = false;
  form.value = {};
  emit("close");
  refresh && emit("success");
};
defineExpose({ open });
</script>
